<template>
  <div class="search-form">
    <SearchForm
      ref="SearchForm"
      :searchList="formData"
      :operation="searchOperation"
      :rules="rules"
      formType="form"
      @searchSubmit="searchSubmit"
      @add="add"
    ></SearchForm>
  </div>
</template>

<script>
// 目的为了简化组件使用时的代码和统一风格
/*
searchList：搜索条件数组  searchTitle:搜索标题  operation：操作按钮
**/
//  searchList: [
//         {
//           label: "用户账户",
//           type: "input",
//           value: "",
//           name: "keyword",
//           placeholder: "请输入用户账户"
//         },
//         {
//           label: "姓名",
//           type: "input",
//           value: "",
//           name: "realName",
//           placeholder: "请输入姓名"
//         },
//         {
//           label: "城市",
//           type: "select",
//           value: "2",
//           name: "city",
//           placeholder: "请选择城市",
//           selectOptions: [
//             {
//               label: "广州",
//               value: "1"
//             },
//             {
//               label: "深圳",
//               value: "2"
//             },
//             {
//               label: "东莞",
//               value: "3"
//             }
//           ]
//         }
//       ]
//  formType="form"时是表单组件
import { mapActions, mapGetters } from 'vuex'
export default {
  components: {},
  props: {},
  data () {
    return {
      searchTitle: '', // 标题
      searchOperation: {
        submitState: true, // 搜索按钮
        addState: true// 添加按钮
      },
      searchList: [// 搜索组件条件
        {
          label: '店长姓名',
          type: 'input',
          value: '',
          name: 'master',
          disabled: true,
          placeholder: '请输入店长姓名'
        },
        {
          label: '店铺名称',
          type: 'input',
          value: '',
          name: 'name',
          placeholder: '请输入店铺名称'
        },
        {
          label: '店铺手机号码',
          type: 'input',
          value: '',
          name: 'tel',
          placeholder: '请输入店铺手机号码'
        },
        {
          label: '店铺状态',
          type: 'select',
          value: -1,
          name: 'state',
          placeholder: '请选择店铺状态',
          selectOptions: [
            {
              label: '全部',
              value: -1
            },
            {
              label: '正常',
              value: 0
            },
            {
              label: '已注销',
              value: 1
            }
          ]
        },
        {
          label: '所属行业',
          type: 'select',
          value: -1,
          name: 'industry',
          placeholder: '请选择所属行业',
          selectOptions: []
        },
        {
          label: '注册时间',
          type: 'daterange', // 时间范围
          value: '',
          name: 'startTime-endTime'
        },
        {
          label: '注册时间',
          type: 'date', // 单个时间
          value: '',
          name: 'startTime-endTime'
        }
      ],
      rules: {
        provinces: [
          {
            trigger: 'blur',
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请输入密码'))
              }
              if (value !== '') {
                console.log('this.ruleForm: ', this.$refs.SearchForm.ruleForm)// 获取表单ruleForm的值
                this.$refs.SearchForm.$refs.ruleForm.validateField('checkPass')
              }
              callback()
            }
          }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'bsiCountryList'
    ]),
    formData: { // 使用form时需要设置get set方法来做数据响应获取到最新赋值的内容填充到组件内 主要是为了解决获取详情时数据回填的问题
      get () {
        return this.searchList
      },
      set (data) {
        this.detailId = data.id
        return this.searchList.map((item) => {
          if (item.name === 'countryCode') {
            item.selectOptions = this.bsiCountryList
          }
          item.value = data[item.name]
        })
      }
    }
  },
  created () {

  },
  methods: {
    searchSubmit (data) { // 执行条件搜索返回搜索条件值
      console.log('data: ', data)
    },
    add () { // 触发添加按钮

    }
  }
}
</script>

<style scoped lang="scss">
</style>
